<template>
<div class="contentmain">
        <el-row>
            <el-col :span="5" style="float:left">
                <el-button type="primary" icon="el-icon-plus" @click="newadd">添加订货单</el-button>
                <el-button type="primary" @click="out">导出</el-button>
            </el-col>
            <el-col :span="19" style="float:right">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item style="float:right">
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                    <!-- <el-form-item style="float:right" v-if="shiros">
                        <el-select v-model="formInline.region" placeholder="订货方">
                            <el-option label="全部" value="-1"></el-option>
                            <el-option v-for="item in opt" :label="item.shopName" :key="item.shopId" :value="item.shopId"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item style="float:right">
                        <el-date-picker
                            v-model="formInline.value1"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="订货日期" :default-time="['00:00:00', '23:59:59']">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item style="float:right">
                        <el-input v-model="formInline.stockid" placeholder="商品编号"></el-input>
                    </el-form-item>
                    <el-form-item style="float:right">
                        <el-input v-model="formInline.goodname" placeholder="商品名称"></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <!-- 查询 -->
        
        <el-row>
            <el-col :span="24">
                <el-table ref="multipleTable" :data="td" tooltip-effect="dark" style="width: 100%" v-loading="loading" element-loading-text="数据加载中...">
                    <el-table-column label="订货方">
                        <template slot-scope="scope">
                            {{shopname(scope.row.reserveShop)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="goodId" label="商品编号">
                    </el-table-column>
                    <el-table-column prop="goodName" label="商品名称">
                    </el-table-column>
                    <el-table-column label="订货时间">
                        <template slot-scope="scope">
                            {{scope.row.reserveTime | format}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="num" label="数量">
                    </el-table-column>
                    <!-- <el-table-column prop="spec" label="单位">
                    </el-table-column> -->
                    <el-table-column prop="remark" label="备注">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="detial(scope.$index, scope.row)">查看更多</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <!-- 表格 -->
        <CreateBooking />
        <!-- dialog -->
        <el-row>
            <el-col :span="8" :offset="16">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="pagecount">
                </el-pagination>
            </el-col>
        </el-row>
        <!-- 翻页 -->
    </div>
</template>
<script>
import moment from 'moment'//时间组件
import CreateBooking from 'components/Drp/CreateBooking'
export default {
    data(){
        return{
            shiros:this.$store.state.shiro,
            formInline:{},
            td:[],
            opt:[],
            loading:false,
            currentPage:1,
            pagecount:0
        }
    },
    components:{//弹出窗组件
        CreateBooking
    },
    filters:{
        format(v){//过滤日期
            return moment(v).format("YYYY-MM-DD")
        }
    },
    computed:{
        getshopid(){//监听当前店铺
            return this.$store.state.TOPshopID
        },
        getstate(){//监听弹窗
            return this.$store.state.dinghuo
        }
    },
    watch:{
        getshopid(v){//当权限为超管,当改变了当前店铺,带店铺id提交重新获取列表
            if(v){
                var pp=new URLSearchParams()
                if(!this.$store.state.shiro){
                    return
                }
                if(this.formInline.goodname){
                    pp.append('goodName',this.formInline.goodname)
                }
                if(this.formInline.stockid){
                    pp.append('goodId',this.formInline.stockid)
                }
                if(this.formInline.value1){
                    pp.append('reserveStartTime',moment(this.formInline.value1[0]).format("YYYY-MM-DD HH:mm:ss"))
                    pp.append('reserveEndTime',moment(this.formInline.value1[1]).format("YYYY-MM-DD HH:mm:ss"))
                }
                if(this.$store.state.TOPshopID!=-1){
                    pp.append('shopId',this.$store.state.TOPshopID)
                }
                this.getData(pp)
            }
        },
        getstate(v){//当前dialog关闭后刷新列表(权限判断)
            if(!v){
                this.$store.state.dinghuo=true
                if(this.$store.state.shiro){
                    this.getData()
                }else{
                    if(this.$store.state.TOPshopID){
                        var pp=new URLSearchParams()
                        pp.append('shopId',this.$store.state.TOPshopID)
                        this.getData(pp)
                    }
                }
            }
        }
    },
    activated(){//页面活动时获取数据(权限判断)
    if(isDetailBack){
        if(this.$store.state.shiro){
            this.getData()
        }else{
            if(this.$store.state.TOPshopID){
                var pp=new URLSearchParams()
                pp.append('shopId',this.$store.state.TOPshopID)
                this.getData(pp)
            }
        }
    }
    },
    created(){//创建时获取店铺列表用于过滤
        var _this=this
        this.opt=[]
        axios.get('/shop/listShop.do').then(r=>{
            if(r.data.code!=200){
                _this.$message.error(r.data.message)
                return
            }
            _this.opt=[].concat(r.data.response.shopList)
        })
    },
    methods:{
        shopname(v){//根据入参返回当前店铺的名称
            for(var i=0;i<this.opt.length;i++){
                if(v==this.opt[i].shopId){
                    return this.opt[i].shopName
                }
            }
        },
        handleSizeChange(i){//翻页
            this.topage(i)
        },
        handleCurrentChange(i){//翻页
            this.topage(i)
        },  
        topage(i){//翻页汇总,带搜索参数(权限判断)
            var pp=new URLSearchParams()
            pp.append('pageNo',i)
            if(this.formInline.goodname){
                pp.append('goodName',this.formInline.goodname)
            }
            if(this.formInline.stockid){
                pp.append('goodId',this.formInline.stockid)
            }
            if(this.formInline.value1){
                pp.append('reserveStartTime',moment(this.formInline.value1[0]).format("YYYY-MM-DD HH:mm:ss"))
                pp.append('reserveEndTime',moment(this.formInline.value1[1]).format("YYYY-MM-DD HH:mm:ss"))
            }
            if(this.$store.state.shiro){
                if(this.formInline.region && this.formInline.region!=-1){
                    pp.append('shopId',this.formInline.region)
                }else{
                    if(this.$store.state.TOPshopID && this.$store.state.TOPshopID!=-1){
                        pp.append('shopId',this.$store.state.TOPshopID)
                    }
                }
            }else{
                pp.append('shopId',this.$store.state.TOPshopID)
            }
            this.getData(pp)
        },
        detial(i,r){//订货详情,带商品id和当前订货序列号跳转
            this.$router.push({path: '/Detial', query: {id: r.goodId,type:5}})
        },
        newadd(){//新增订货单
            this.$store.commit('ChangeCreateBooking')
        },
        onSubmit(){//搜索内容(权限判断)
            var pp=new URLSearchParams()
            if(this.formInline.goodname){
                pp.append('goodName',this.formInline.goodname)
            }
            if(this.formInline.stockid){
                pp.append('goodId',this.formInline.stockid)
            }
            if(this.formInline.value1){
                pp.append('reserveStartTime',moment(this.formInline.value1[0]).format("YYYY-MM-DD HH:mm:ss"))
                pp.append('reserveEndTime',moment(this.formInline.value1[1]).format("YYYY-MM-DD HH:mm:ss"))
            }
            if(this.$store.state.shiro){
                if(this.formInline.region && this.formInline.region!=-1){
                    pp.append('shopId',this.formInline.region)
                }else{
                    if(this.$store.state.TOPshopID && this.$store.state.TOPshopID!=-1){
                        pp.append('shopId',this.$store.state.TOPshopID)
                    }
                }
            }else{
                pp.append('shopId',this.$store.state.TOPshopID)
            }
            this.getData(pp)
        },
        out(){
            var _this=this
            var pp=new URLSearchParams()
            if(this.formInline.goodname){
                pp.append('goodName',this.formInline.goodname)
            }
            if(this.formInline.stockid){
                pp.append('goodId',this.formInline.stockid)
            }
            if(this.formInline.value1){
                pp.append('reserveStartTime',moment(this.formInline.value1[0]).format("YYYY-MM-DD HH:mm:ss"))
                pp.append('reserveEndTime',moment(this.formInline.value1[1]).format("YYYY-MM-DD HH:mm:ss"))
            }
            if(this.$store.state.shiro){
                if(this.formInline.region && this.formInline.region!=-1){
                    pp.append('shopId',this.formInline.region)
                }else{
                    if(this.$store.state.TOPshopID && this.$store.state.TOPshopID!=-1){
                        pp.append('shopId',this.$store.state.TOPshopID)
                    }
                }
            }else{
                pp.append('shopId',this.$store.state.TOPshopID)
            }
            console.log(HOST+'/getReserveGoodsByExcel.do?'+pp.toString())
            window.open(HOST+'/getReserveGoodsByExcel.do?'+pp.toString())
        },
        getData(v){//统一获取列表参数(权限判断)
            var _this=this
            this.loading=true
            this.td=[]
            axios.get('/findReserveGoodsList.do',{params:v}).then(r=>{
                if(r.data.code==200){
                    _this.td=[].concat(r.data.response.reserveGoodsList)
                    _this.pagecount=r.data.response.page.totalCount
                    _this.loading=false
                }else{
                    if(r.data.message=="not login"&&r.data.code==500){
                        _this.$message.error("访问者,请登录")
                        router.push('/Login');
                        return
                    }
                    _this.$message.error(r.data.message)
                    _this.loading=false
                }
            })
        }
    }
}
</script>